<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>出租车管理系统</title>
    <link rel="icon" href="/img/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/admin/project/advert_list.css">
    <script src="/script/jquery-3.3.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/script/admin/bus/position.js"></script>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=28YXeDrItzpP8aHCD7e8xSfXHsF6UsnG">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
</head>
<body>
<input type="hidden" id="busId" name="busId" th:value="${busId}">
<a class="layui-btn" onclick="refresh();">刷新</a>
<div id="container">
</div>

<script type="text/javascript">
    var map = new BMap.Map("container");//地图的实例

    var busId = $("#busId").val();

    var myPosition = getCurrenPosition(busId);

    //要把点和marker设置成全局变量试一试
    var point;
    var marker;

    var  carIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/car.png", new BMap.Size(300,157));//创建一个小车的图标

    //让程序停止200毫秒之后在做function中的事情
    setTimeout(function () {
        // 创建地图实例
        point = new BMap.Point(myPosition[0], myPosition[1]);//这里已经能得到，就不打印了

        // 初始化地图
        map.centerAndZoom(point, 13);

        //添加一个marker
        marker = new BMap.Marker(point,{icon:carIcon});
        map.addOverlay(marker);

    },500);

    function  refresh() {
        myPosition2 = getCurrenPosition(busId);
        // 创建地图实例
        point = new BMap.Point(myPosition2[0], myPosition2[1]);//这里已经能得到，就不打印了
        map.clearOverlays();//在地图上清除掉所有的覆盖物。
        // 初始化地图
        map.centerAndZoom(point, 13);

        //添加一个marker
        marker = new BMap.Marker(point,{icon:carIcon});
        map.addOverlay(marker);

        // var pointA = new BMap.Point(121.436043,29.294384); // 创建点坐标A–宁波市宁海县
        // var pointB = new BMap.Point(116.450111,39.927669); // 创建点坐标B–北京市朝阳区
        // alert('从宁波到朝阳区的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //获取两点距离
    }

    //获取车辆当前位置
    function getCurrenPosition() {
        var position = [];
        $.ajax({
            type:"POST"
            ,url:"/admin/getPositionByBusId"
            ,data:{
                busId:busId
            }
            ,async:false
            ,success:function (res) {
                var lon = res.data.position1.lon;
                var lat = res.data.position1.lat;
                if(lon == null || lon == '' || lat == null || lat ==''){
                    layer.msg("经纬度不能为空");
                    return ;
                }
                position.push(lon);
                position.push(lat);

            }
            ,error:function () {
                layer.msg("系统错误！");
            }
        });
        return position;
    }
</script>
</body>
</html>